<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import resize from "./mixins/resize";

const animationDuration = 3000;

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "100%",
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      this.chart = this.$echarts.init(this.$el);

      this.chart.setOption(
        {
          tooltip: {
            trigger: "axis",
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
            },
          },
          radar: {
            radius: "60%",
            center: ["50%", "42%"],
            splitNumber: 8,
            splitArea: {
              areaStyle: {
                color: "rgba(127,95,132,.3)",
                opacity: 1,
                shadowBlur: 45,
                shadowColor: "rgba(0,0,0,.5)",
                shadowOffsetX: 0,
                shadowOffsetY: 15,
              },
            },
            indicator: [
              { name: "Sales", max: 16000 },
              { name: "Administration", max: 16000 },
              { name: "Information Technology", max: 160000 },
              { name: "Customer Support", max: 160000 },
              { name: "Development", max: 160000 },
              { name: "Marketing", max: 160000 },
            ],
          },
          legend: {
            left: "center",
            bottom: "10%",
            data: ["Allocated Budget", "Expected Spending"],
          },
          series: [
            {
              type: "radar",
              symbolSize: 0,
              areaStyle: {
                shadowBlur: 13,
                shadowColor: "rgba(0,0,0,.2)",
                shadowOffsetX: 0,
                shadowOffsetY: 10,
                opacity: 1,
              },
              data: [
                {
                  value: [4200, 3000, 20000, 35000, 50000, 18000],
                  name: "Allocated Budget",
                },
                {
                  value: [5000, 14000, 26000, 26000, 42000, 21000],
                  name: "Expected Spending",
                },
              ],
              animationDuration: animationDuration,
            },
          ],
        },
        true
      );
    },
  },
};
</script>
